<template>
  <div class="unpack">
    <div class="battle">
      <div
        class="battle-title"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div><span style="font-size: 26px">盲盒开箱</span></div>

        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div class="search-bar">
            <input
              type="input-meg"
              placeholder="搜索名称"
              v-model="searchQuery"
            />
            <button @click="handleSearch">
              <img
                src="../../static/img/set/search.png"
                alt=""
                class="icon-search"
              />
            </button>
          </div>
          <div class="dropdown" @click="toggleDropdown">
            <!-- 下拉框头部 -->
            <div class="dropdown-container">
              <img
                v-if="selectedOption && selectedOption.icon"
                :src="selectedOption.icon"
                class="icon-img"
              />
              <span class="text">{{
                selectedOption ? selectedOption.text : "全部金额"
              }}</span>
              <img alt="toggle" class="arrow-img" :src="isOpen ? up : down" />
            </div>

            <!-- 下拉内容 -->
            <div v-if="isOpen" class="dropdown-content">
              <div
                v-for="(option, index) in options"
                :key="index"
                @click.stop="selectOption(option)"
                class="dropdown-item"
              >
                <img
                  :src="option.icon"
                  class="item-icon"
                  v-if="
                    typeof option.icon === 'string' &&
                    option.icon.includes('.png')
                  "
                />
                <span class="item-text">{{ option.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="battle-tabs">Heavenly Thought Cases</div>

      <div class="battle-box-list battle-scrollbar">
        <div class="card-container">
          <div class="card-row" v-for="row in 2" :key="'row-' + row">
            <div v-for="col in 6" :key="'col-' + col" class="card">
              <!-- 计算当前索引 -->
              <div v-if="cards[(row - 1) * 6 + (col - 1)]">
                <img
                  :src="cards[(row - 1) * 6 + (col - 1)]?.image"
                  alt="Card Image"
                  class="card-image"
                />
                <div class="card-info">
                  <div class="card-name">
                    {{ cards[(row - 1) * 6 + (col - 1)]?.name }}
                  </div>
                  <div class="card-price">
                    <span class="price-icon">$</span>
                    {{ cards[(row - 1) * 6 + (col - 1)]?.price }}
                    <button class="price-button">
                      <img
                        src="../../static/img/set/coinx.png"
                        alt="Price Button"
                      />
                      <div>{{ cards[(row - 1) * 6 + (col - 1)]?.price }}</div>
                    </button>
                  </div>
                </div>
              </div>
              <!-- 没有数据的位置不显示任何内容 -->
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 150px; padding: 15px; font-size: 20px">
        Event Cases
      </div>
      <div class="battle-box-list" style="margin-top: -130px">
        <div class="card-container">
          <div class="card-row" v-for="row in 1" :key="'row-' + row">
            <div v-for="col in 6" :key="'col-' + col" class="card">
              <!-- 计算当前索引 -->
              <div v-if="evens[(row - 1) * 6 + (col - 1)]">
                <img
                  :src="evens[(row - 1) * 6 + (col - 1)]?.image"
                  alt="Card Image"
                  class="card-image"
                />
                <div class="card-info">
                  <div class="card-name">
                    {{ evens[(row - 1) * 6 + (col - 1)]?.name }}
                  </div>
                  <div class="card-price">
                    <span class="price-icon">$</span>
                    {{ evens[(row - 1) * 6 + (col - 1)]?.price }}
                    <button class="price-button">
                      <img
                        src="../../static/img/set/coinx.png"
                        alt="Price Button"
                      />
                      <div>{{ cards[(row - 1) * 6 + (col - 1)]?.price }}</div>
                    </button>
                  </div>
                </div>
              </div>
              <!-- 没有数据的位置不显示任何内容 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Execute />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import coin from "@/static/img/set/coinx.png";
import gun from "@/static/img/set/gun.png";
import up from "@/static/img/set/up.png";
import down from "@/static/img/set/down.png";
import Execute from "./components/executeUnpack.vue";
export default defineComponent({
  setup() {
    const searchQuery = ref("");
    const handleSearch = () => {
      // 在这里添加你的搜索逻辑
      console.log("Searching for:", searchQuery.value);
    };
    const isOpen = ref(false);
    const selectedOption = ref(null);
    // 下拉选项数据（含图标和文本）
    const options = [
      { icon: coin, text: "全部金额" },
      { icon: "€", text: "欧元" },
      { icon: "£", text: "英镑" },
      { icon: "¥", text: "日元" },
    ];
    function toggleDropdown() {
      isOpen.value = !isOpen.value;
    }

    function selectOption(option) {
      selectedOption.value = option;
      isOpen.value = false; // 选择后关闭下拉
    }

    const cards = ref([
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
      { image: gun, name: "手枪", price: "246.86" },
    ]);
    const evens = ref([
      { image: gun, name: "手枪1", price: "246.86" },
      { image: gun, name: "手枪1", price: "246.86" },
      { image: gun, name: "手枪1", price: "246.86" },
      { image: gun, name: "手枪1", price: "246.86" },
      { image: gun, name: "手枪1", price: "246.86" },
      { image: gun, name: "手枪1", price: "246.86" },
    ]);
    return {
      handleSearch,
      searchQuery,
      isOpen,
      selectedOption,
      options,
      toggleDropdown,
      selectOption,
      coin,
      cards,
      gun,
      up,
      down,
      evens,
    };
  },

  components: {
    Execute
  },
});
</script>

<style scope lang="scss">
.unpack {
  display: flex;
  justify-content: center;
  align-items: center;
  .battle {
    width: 1280px;
    height: 1047px;
    background-color: rgb(18, 18, 23);
    .battle-title {
      padding: 10px;
      .search-bar {
        display: flex;
        align-items: center;
        background-color: #2c2c2c;
        padding: 8px 16px;
        border-radius: 4px;
        margin-right: 10px;
        width: 200px;
        height: 46px;

        input {
          flex: 1;
          background: transparent;
          border: none;
          color: white;
          font-size: 16px;
          &::placeholder {
            color: #888;
          }
          width: 28px;
        }

        button {
          background: transparent;
          border: none;
          cursor: pointer;
          margin-left: 8px;

          .icon-search {
            font-size: 18px;
            color: white;
          }
        }
      }
      .dropdown {
        position: relative;
        width: 189px;
        font-family: Arial, sans-serif;
      }

      .dropdown-container {
        display: flex;
        align-items: center;
        background-color: #2c2c2c;
        padding: 8px 16px;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        height: 46px;

        .icon-img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
        .icon {
          margin-right: 8px;
          font-size: 16px;
        }

        .text {
          font-size: 14px;
        }

        .arrow-img {
          width: 25px; /* 示例宽度 */
          height: 14px; /* 示例高度 */
          margin-left: 50px;
          transition: transform 0.3s ease;
        }

        .arrow-up {
          transform: rotate(180deg);
        }
      }

      .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #2c2c2c;
        border-radius: 4px;
        overflow: hidden;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        color: white;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }

        .item-icon {
          margin-right: 8px;
          width: 16px;
          height: 16px;
        }
      }
    }
    .battle-tabs {
      margin-bottom: 10px;
      font-size: 20px;
      margin-top: 30px;
      padding: 10px;
    }
    .battle-box-list {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1280px;
      height: 406px;
      background: rgb(18, 18, 23);
      .card-container {
        margin-top: 120px;
        .card-row {
          display: flex;

          margin-bottom: 20px;
        }

        .card {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          width: 200px;
          height: 254px;
          border-radius: 14px;
          background: rgba(28, 28, 35, 1);
          margin-right: 10px;

          &:empty {
            visibility: hidden; // 隐藏空白的 card 元素，保留布局结构
          }
          .price-button {
            position: absolute;
            bottom: 20px;
            right: 15px;
            opacity: 0;
            width: 168px;
            height: 38px;
            transition: opacity 0.3s ease;
            border-radius: 6px;
            background: rgba(255, 102, 25, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            img {
              width: 17px; /* 根据图片大小调整 */
              height: 17px;
            }
          }
          &:hover .price-button {
            opacity: 1;
          }
          .card-image {
            width: 140px;
            height: 117px;
          }

          .card-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            color: white;

            .card-name {
              font-size: 16px;
              margin-top: 20px;
            }

            .card-price {
              font-size: 14px;
              margin-top: 10px;
              // position: relative;
              .price-icon {
                color: gold;
              }
              // .price-button {
              //   display: none;
              //   position: absolute;
              //   top: 0;
              //   left: 0;
              //   opacity: 0;
              //   transition: opacity 0.3s ease;
              //   pointer-events: none; /* 防止点击穿透 */
              // }
            }
          }
        }
      }
    }
  }
}
</style>
